<template>
  <div class="mb-list">
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="finishedText"
      :error.sync="error"
      :error-text="errorText"
      @load="onLoad"
    >
      <div 
        class="list-cell van-hairline--bottom"
        v-for="(item,index) in list"
        :key="index"
        @click="listCellClick(item)"
      >
        <van-row type="flex" class="cell-row">
          <van-col span="16" class="van-ellipsis">{{item[listMeta[0]+"_DISPLAY"] == null ? item[listMeta[0]] : item[listMeta[0]+"_DISPLAY"]}}</van-col>
          <van-col span="8" class="cell-col-right" :class="'cell-color-' + item.___procStatus">{{item.___procStatus_DISPLAY}}</van-col>
        </van-row>
        <van-row type="flex" class="cell-row" style="color: #C4C9D9;">
          <van-col span="16" class="van-ellipsis">{{listMeta[1] + ":" + (item[listMeta[1]+"_DISPLAY"] == null ? item[listMeta[1]] : item[listMeta[1]+"_DISPLAY"])}}</van-col>
          <van-col span="8" class="cell-col-right van-ellipsis">{{item[listMeta[2]+"_DISPLAY"] == null ? item[listMeta[2]] : item[listMeta[2]+"_DISPLAY"]}}</van-col>
        </van-row>
        <van-row type="flex" class="cell-row van-hairline--top">
          <van-col span="16" class="van-ellipsis">{{item.___createTime}}</van-col>
          <van-col span="8" class="cell-col-right"><van-icon name="ellipsis" /></van-col>
        </van-row>
      </div>
    </van-list>
  </div>
</template>
<script>
/*!
 *  这是一个移动menus组件，结合快速搜索与高级搜索，对标pc功能
 *  流程状态对照表：
 *    1-审核中(#F3C566)；2-已驳回(#C24F5D)；3-已完成(#70B603)；4-草稿(#D7D7D7)；5-已终止(#BFC38F)；6-已追回(#5B9CFF)；0-未知状态(默认)
 */

export default {
  name: 'mb-list',
  data () {
    return {
      // ...
      loading: this.value
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    list: {
      type: Array,
      default: () => []
    },
    listMeta: {
      type: Array,
      default: () => []
    },
    finished: {
      type: Boolean,
      default: false
    },
    finishedText: {
      type: String,
      default: '没有更多了'
    },
    error: {
      type: Boolean,
      default: false
    },
    errorText: {
      type: String,
      default: '请求失败，点击重新加载'
    }
  },
  watch: {
    loading: function(value) {
      this.$emit('input', value)
    },
    value: function(value) {
      this.loading = value
    }
  },
  methods: {
    onLoad() {
      this.$emit('load')
    },
    /*!
     * 特别说明（确认人 -- 刘伟峰、王志伟 2020/1/17）：
     * 列表子项右划出现按钮组【编辑】【查看】，数据来自于showGrid.do返回数据models.options
     */
    listCellClick(item) {
      this.$emit('item-click', item)
    }
  }
}
</script>
<style>
  .list-cell {
    padding: 10px 16px;
  }
  .cell-row {
    line-height: 24px;
  }
  .cell-col-right {
    padding-left: 8px;
    text-align: right;
  }
  .cell-color-1 {
    color: #F3C566;
  }
  .cell-color-2 {
    color: #C24F5D;
  }
  .cell-color-3 {
    color: #70B603;
  }
  .cell-color-4 {
    color: #D7D7D7;
  }
  .cell-color-5 {
    color: #BFC38F;
  }
  .cell-color-6 {
    color: #5B9CFF;
  }
</style>